<template>
  <div>
    <template v-if="queryParams.isFilter">
      <div v-if="!filterShow" class="flex justify-end mb-5">
        <a-button type="primary" @click="handleFilter"> 查看符合筛选条件下所有车辆的违章代办费 </a-button>
      </div>
      <list-searcher v-if="filterShow" :searchList="searchList" v-model:searchForm="queryParams" @loadData="handleSubmit" />
    </template>
    <a-alert class="mb-5 items-start">
      <template #icon>
        <icon-exclamation-circle />
      </template>
      <div>1、违章代办总计=代办服务费-代办真实成本</div>
      <div>2、如订单存在换车，则统计的金额为所选车辆在订单时间期间产生违章后生成的代办费</div>
    </a-alert>

    <table-index :table="table" @loadData="loadData">
      <template #table-summary>
        <div class="flex justify-end items-center w-full">
          <a-button v-if="queryParams.isFilter" type="primary" @click="handleExport">导出</a-button>
        </div>
      </template>
      <template #violationInfo="{ record }">
        <div v-if="record.businessCode">
          <a-link @click="() => onViolationLink(record)">{{ record.businessCode }}</a-link>
        </div>
        <div v-else> - </div>
        <tag type="primary" v-if="record.businessStatusName">{{ record.businessStatusName }}</tag>
      </template>
      <template #orderInfo="{ record }">
        <div class="order-info-item" v-if="record.orderCode">
          <div>自有</div>
          <div>
            <a-link @click="() => onOrderLink(record)">{{ record.orderCode }}</a-link>
          </div>
        </div>
        <div class="order-info-item" v-if="record.channelOrderCode">
          <div>渠道</div>
          <div>
            <a-link @click="() => onOrderLink(record)">{{ record.channelOrderCode }}</a-link>
          </div>
        </div>
        <tag type="primary" v-if="record.orderStatusName">{{ record.orderStatusName }}</tag>
      </template>
      <template #rentalPeriod="{ record }">
        <div class="flex items-start mb-1" v-if="record.startTime">
          <tag type="warn" class="p-0">预取</tag>
          <div class="flex-1">
            {{ record.startTime }}
          </div>
        </div>
        <div class="content-item return" v-if="record.endTime">
          <div class="flex items-start mb-1">
            <tag type="success" class="p-0">预还</tag>
            <div class="flex-1">
              {{ record.endTime }}
            </div>
          </div>
        </div>
        <div class="content-item pickup" v-if="record.actualStartTime">
          <div class="flex items-start mb-1">
            <tag type="warn" class="p-0">实取</tag>
            <div class="flex-1">
              {{ record.actualStartTime }}
            </div>
          </div>
        </div>
        <div class="content-item return" v-if="record.actualEndTime">
          <div class="flex items-start mb-1">
            <tag type="success" class="p-0">实还</tag>
            <div class="flex-1">
              {{ record.actualEndTime }}
            </div>
          </div>
        </div>
      </template>

      <template #carUserList="{ record }">
        <template v-for="item in record.carUserList" :key="item">
          <div>{{ item.fromTime }} 至 {{ item.toTime }}</div>
        </template>
      </template>
      <template #replaceInfoTitle>
        <span class="mr-1">车辆使用周期</span>
        <a-tooltip>
          <icon-exclamation-circle class="icon-tip" />
          <template #content>
            <div>1、车辆使用周期为车辆在该笔订单下真实使用的时间</div>
            <div>
              2、订单存在换车时，车辆租金、保险费根据车辆使用周期按天计算且归属于换下车，手续费及其他换车前/换车时添加的费用无需按天计算，直接归属换下车辆，换车后添加的费用归换上车
            </div>
          </template>
        </a-tooltip>
      </template>
    </table-index>
  </div>
</template>

<script setup lang="ts">
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { inject, onMounted, ref, computed, reactive } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { navigate2permission, navigate2orderDetail } from '../../../utils'
  import { exportViolationFee, getViolationFeeList } from '@/api/dashboard/vehicleAccounting'
  import { getViolationDetail } from '@/api/asset/carViolation'
  import { useExport } from '@/hooks/list'

  const { navigateTo } = useNavigate()

  const filterShow = ref(false)
  const modalStatus = inject<any>('modalStatus')
  const closeModal = inject<any>('closeModal')
  const parentQueryParam = computed(() => modalStatus.queryParams)

  const queryParams = reactive<any>({
    carId: parentQueryParam.value.carId,
    licenseNoLike: parentQueryParam.value.licenseNo,
    orgIdList: parentQueryParam.value.orgIdList,
    startTime: parentQueryParam.value.startTime,
    endTime: parentQueryParam.value.endTime,
    profitFlag: parentQueryParam.value.profitFlag,
    isFilter: parentQueryParam.value.isFilter,
  })

  const searchList = [
    {
      label: '车牌号',
      prop: 'licenseNo',
      type: 'a-input',
    },
  ]

  const table = useTable({
    columns: [
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
        fixed: 'left',
        width: 120,
      },
      {
        title: '违章单信息',
        dataIndex: 'violationInfo',
        slotName: 'violationInfo',
        width: 150,
      },
      {
        title: '违章时间',
        dataIndex: 'violationTime',
        width: 170,
      },
      {
        title: '违章关联门店',
        dataIndex: 'orgName',
      },
      {
        title: '关联订单',
        dataIndex: 'orderInfo',
        slotName: 'orderInfo',
        width: 230,
      },
      {
        title: '订单租赁周期',
        dataIndex: 'rentalPeriod',
        slotName: 'rentalPeriod',
        width: 220,
      },
      {
        title: '是否存在换车',
        dataIndex: 'ifChangeCarName',
      },
      {
        titleSlotName: 'replaceInfoTitle',
        title: '车辆使用周期',
        dataIndex: 'carUserList',
        slotName: 'carUserList',
        width: 190,
      },
      {
        title: '违章代办收入',
        dataIndex: 'totalAmount',
      },
      {
        title: '代办服务费',
        dataIndex: 'handleAmount',
      },
      {
        title: '代办真实成本',
        dataIndex: 'handleRealCost',
      },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParams, getViolationFeeList)

  onMounted(() => {
    loadData()
  })

  const handleFilter = () => {
    // table.columns.unshift({
    //   title: '车牌号',
    //   dataIndex: 'licenseNo',
    //   fixed: 'left',
    //   width: 100,
    // })
    // table.columns[1].fixed = ''

    filterShow.value = true
    queryParams.carId = null
    loadData()
  }

  const handleSubmit = () => {
    queryParams.licenseNoLike = queryParams.licenseNo
    loadData()
  }

  // 获取违章详情
  const handleViolationDetail = async (record: any) => {
    const res = await getViolationDetail({ id: record.businessId })
    const { licenseNo, id, carId, handleType } = res.result
    navigate2permission('violationDetail', { tabName: licenseNo, id, carId, handleType }, navigateTo, closeModal)
  }

  const onViolationLink = (record: any) => {
    handleViolationDetail(record)
  }

  const onOrderLink = (record: any) => {
    console.log('违章代办总计: ', record)
    const { orderId, orderCode, orderStatus, carId } = record

    // 后端说此版本没有长租，增加 orderType 复杂，只跳转短租
    navigate2orderDetail({ id: orderId, carId, orderCode, orderStatus, orderType: 1 }, navigateTo, closeModal)
  }

  const handleExport = () => {
    useExport(exportViolationFee, queryParams)
  }
</script>
<style lang="less" scoped>
  .icon-tip {
    font-size: 16px;
    color: #165dffff;
    vertical-align: -3px;
  }
</style>
